<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<!-- <script src="common.js"></script> -->
	<style>
		html,
		body {
			margin: 0;
			padding: 0;
		}

		.container {
			width: 80%;
			margin: 0 auto;
			border: 1px solid #CCCCCC;
			padding: 10px;
		}

		table {
			width: 100%;
			margin-top: 20px;
		}

		table tr {
			height: 38px;
		}

		table tr th,
		table tr td {
			border: 1px solid #CCCCCC;
			text-align: center;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="header">
			姓名：<input type="text" id="username" placeholder="请输入姓名" />
			年龄：<input type="number" id="age" placeholder="请输入年龄" />
			成绩：<input type="number" id="score" placeholder="多少分" />
			阶段：<select id="term">
				<option value="">请选择</option>
				<option value="p1">p1</option>
				<option value="p2">p2</option>
				<option value="p3">p3</option>
			</select>
			<button id="add">添加</button>
			<button id="delAll">全部删除</button>
			<button id="delMany">批量删除</button>
			<button id="mysort">按分数从高到低</button>
			<input type="text" id="mysearch" />
			<button id="gosearch">搜索</button>
			<button id="changeColor">开启移入变色</button>
		</div>
		<table cellspacing="0">
			<thead>
				<tr>
					<th><input type="checkbox" id="allCheck">全选</th>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>成绩</th>
					<th>阶段</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="list">
				<tr>
					<td><input type="checkbox"></td>
					<td>序号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>成绩</td>
					<td>阶段</td>
					<td>
						<button>删除</button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<script>
		// 获取localStorage 
		var studentList = []
		if (localStorage.studentList) {
			studentList = JSON.parse(localStorage.studentList);
		} else {
			localStorage.studentList = JSON.stringify([])
		}
		// 添加---------------------------
		var add = document.getElementById("add");
		var username = document.getElementById("username");
		var age = document.getElementById("age");
		var grade = document.getElementById("score");
		var term = document.getElementById("term");
		add.onclick = function () {
			if (username.value && age.value && term.value) {
				var obj = {
					name: username.value,
					age: age.value,
					grade: grade.value,
					term: term.value
				}
				studentList.push(obj)
				localStorage.studentList = JSON.stringify(studentList)
				loadList(studentList)
			} else {
				alert("信息不完整")
			}
			// 清空输入框
			username.value = ""
		}
		// 渲染列表---------------	
		var list = document.getElementById("list");
		function loadList(arr) {
			var str = '';
			for (var i = 0; i < arr.length; i++) {
				str += `<tr>
					<td><input class="cks" type="checkbox"></td>
					<td>${i + 1}</td>
					<td>${arr[i].name}</td>
					<td>${arr[i].age}</td>
					<td>${arr[i].grade}</td>
					<td>${arr[i].term}</td>
					<td>
						<button onclick="del(${i},this)">删除</button>
					</td>
				</tr>`
			}
			list.innerHTML = str;
			checkCks() //绑定每个小复选框的change事件
		}
		loadList(studentList)
		// 删除---------------------------
		function del(index, that) {
			console.log(that)
			var inp = that.parentNode.parentNode.children[0].firstElementChild;
			if (inp.checked) {
				studentList.splice(index, 1)
				localStorage.studentList = JSON.stringify(studentList)
				loadList(studentList)
			}
		}
		//开启隔行变色
		var changeColor = document.getElementById("changeColor");
		changeColor.onclick = function () {
			// 获取所有tr 
			var trs = document.querySelectorAll("#list tr");
			if (this.innerHTML == "开启移入变色") {//开启移入变色
				this.innerHTML = "关闭移入变色"
				for (let i = 0; i < trs.length; i++) {
					trs[i].onmouseover = function () {
						if (i % 2 == 0) {
							this.style.background = "red"
						} else {
							this.style.background = "blue"
						}
					}
					trs[i].onmouseout = function () {
						this.style.background = ""
					}
				}
			} else {//关闭移入变色
				this.innerHTML = "开启移入变色"
				for (var i = 0; i < trs.length; i++) {
					trs[i].onmouseover = function () {
						this.style.background = ""
					}
					trs[i].onmouseout = function () {
						this.style.background = ""
					}
				}
			}
		}
		//全选---------------------
		var allCheck = document.getElementById("allCheck");
		allCheck.onchange = function () {
			// 获取所有tr 
			console.log(this.checked)
			var cks = document.querySelectorAll(".cks");
			for (var i = 0; i < cks.length; i++) {
				cks[i].checked = this.checked;
			}
		}
		//检查全选
		function check() {
			var flag = true;
			var cks = document.querySelectorAll(".cks");
			for (var i = 0; i < cks.length; i++) {
				if (!cks[i].checked) {
					flag = false;
				}
			}
			if (flag) {
				allCheck.checked = true;
			} else {
				allCheck.checked = false;
			}
		}
		// 每个小的复选框 都要调用
		function checkCks() {
			var cks = document.querySelectorAll(".cks");
			for (var i = 0; i < cks.length; i++) {
				cks[i].onchange = function () {
					check()
				}
			}
		}
		//排序---------------------
		var mysort = document.getElementById("mysort");
		mysort.onclick = function () {
			studentList.sort(function (a, b) {
				return b.grade - a.grade
			})
			loadList(studentList)
		}
		// 批量删除--------------------------
		var delMany = document.getElementById("delMany");
		delMany.onclick = function () {
			var cks = document.querySelectorAll(".cks");
			for (var i = 0; i < cks.length; i++) {
				if (cks[i].checked) {
					studentList.splice(i, 1)
				}
			}
			loadList(studentList)
			localStorage.studentList = JSON.stringify(studentList)
		}
		// 全部删除 -------------------------
		var delAll = document.getElementById("delAll");
		delAll.onclick = function () {
			studentList = [];
			localStorage.studentList = JSON.stringify([])
			loadList(studentList)
		}

	</script>
</body>

</html>